<template>

    <el-drawer

            :before-close="handleClose"
title="已点菜品"
            :close-on-click-modal="true"
            v-bind="$attrs"
            v-on="$listeners"
            :with-header="false"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            size="40%">


        <div class="clear yudingBox">
            <h3><span>{{number}}</span> 号桌，已点：</h3>
            <p>共 {{form.length}} 条点菜记录</p>
                   <el-table :data="formData">
                        <el-table-column label="图片" width="80px">
                            <template slot-scope="scope">
                                <el-image

                                        :src="foodimg(scope.row.food_img)"

                                      >
                                </el-image>
                            </template>

                        </el-table-column>
                        <el-table-column property="food_name" label="菜品" ></el-table-column>
                        <el-table-column property="food_count" label="份数" width="80px" align="right"></el-table-column>
                        <el-table-column property="food_price" label="价格" width="80px" align="right">
                            <template slot-scope="scope">
                                <span>{{scope.row.food_price}}</span> <span> 元</span>
                            </template>

                        </el-table-column>

                        </el-table>
            <!--分页-->
            <el-pagination
                    :page-size="5"
                    @current-change="fenye"
                    layout="prev, pager, next"
                    :total="form.length">
            </el-pagination>


        <div class="demo-drawer__footer clear">
            <el-button type="primary" size="small" @click="gotoAddFood">去加菜</el-button>

            <el-button @click="cancelForm" size="small">关 闭</el-button>
        </div>
        </div>
    </el-drawer>

</template>

<script>
export default {
  name: "yidian",
  props: ["form","number"],
  data() {
    return {
        locallhost:'http://172.16.10.190:3000/',
      table: false,
      selectFoodData: [],
      loading: false,
      allcaidata: [],

      formLabelWidth: "80px",
      timer: null,
      //时间选项
      yudingTime: "",
        currentPage:1,
    };
  },
    computed:{
        formData(){
            let start=(this.currentPage-1)*5
            let stop=start+5
            let datas=this.form.slice(start,stop)
            return datas


        }

    },
  methods: {
      fenye(val){
          this.currentPage=val
      },
      foodimg(img){
          console.log('图片地址')
          console.log(img)
          console.log(this.locallhost+img)
          return this.locallhost+img
      },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      },
     
    //去加菜
    gotoAddFood() {
        this.$router.push({path:`/home/Diancai/${this.number}`})
    },
      //去结账

    cancelForm() {
      /* this.loading = false;
                this.$emit('closeYudingForm')
                clearTimeout(this.timer);*/
   
      this.$emit("onclose");
   
    },
    getOrderingFood(number){

      console.log(123)
      console.log(number)
            this.axios({
                method:'get',
                url:'selectOrderingFoodById',
                data:{food_table_number:number}
            }).then(data=>{
                console.log('获取已点')
                console.log(data.data)
                if(data.data.code===200){
                    this.selectFoodData=data.data.data
                }
            })
    }
  },
    /*mounted(){
        this.getOrderingFood(this.form.food_table_number)
    }*/
};
</script>

<style lang="less" scoped>
h3 {
    font-size: 1.6rem;
    font-weight: 400;
  padding: 2rem;

  .selectTabeleTips {
    font-size: 12px;
    line-height: 16px;
    font-weight: initial;
    color: #aaaaaa;
  }

    >span{
        font-size: 2rem;
       font-weight: bold;

        color: #ff9d2b;
    }
    .el-button{
        float: right ;
        color: #ffffff;
    }
}
.yudingBox {
  padding-left: 2rem;
    width: 30vw;
}
.demo-drawer__footer {
    padding-top: 2rem;
  padding-left: 2rem;
    .el-button:nth-of-type(1){
          float: left;
      }
    .el-button:nth-of-type(2){
        float: right;
    }
}
.el-image{
    width: 4rem;
    height: 4rem;
}
.el-table__row{
  padding: 0;
}
    .el-drawer{
        outline: none;
    }

</style>